<template>
	<div class="register" v-loading.fullscreen.lock="fullscreenLoading">
		<el-divider content-position="left">
			<i class="el-icon-mobile"></i><span> 手机注册</span>
		</el-divider>
		<el-form :label-position="labelPosition" label-width="80px">
			<el-form-item label="昵称">
				<el-input v-model="RegisterForm.nickName"></el-input>
			</el-form-item>
			<el-form-item label="账户(手机)">
				<el-input v-model="RegisterForm.phoneNumber"></el-input>
			</el-form-item>
			<el-form-item label="" class="login-submit">
				<el-button type="primary" size="small" @click="sendCode()">发送验证码</el-button>
			</el-form-item>
			<el-form-item label="验证码">
				<el-input v-model="RegisterForm.phoneNumberCode"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type='password' v-model="RegisterForm.password"></el-input>
			</el-form-item>
			<el-form-item label="确认密码">
				<el-input type='password' v-model="RegisterForm.confirmPassword"></el-input>
			</el-form-item>
		</el-form>
		<el-row class="login-submit">
			<el-button type="text" size="small" @click="toLogin()">已有账号?去登录</el-button>
			<el-button type="primary" size="small" @click="register()">注册</el-button>
		</el-row>
		<el-divider></el-divider>
	</div>
</template>

<script>
	import bus from '../../utils/bus.js'
	import axios from 'axios'
	export default {
		name: "Login",
		components: {},
		data() {
			return {
				fullscreenLoading: false,
				labelPosition: 'right',
				RegisterForm: {
					nickName: '',
					phoneNumber: '',
					password: '',
					confirmPassword: '',
					phoneNumberCode: ''
				},
			}
		},
		created() {

		},
		mounted() {
			bus.$on('msg', (val) => {
				console.log(val)
			})
		},
		methods: {
			// 跳转到登录页面
			toLogin() {
				console.log('to login')
				this.$router.push('/Login')
			},
			// 注册方法
			register() {
				let vm = this
				if(vm.RegisterForm.nickName.trim() == '' || vm.RegisterForm.nickName.trim().length >8){
					vm.$message.warning("昵称不能为空且不超过8个字符");
					return
				}
				let patternPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
				// 验证手机号的结果
				let resPhone = patternPhone.test(vm.RegisterForm.phoneNumber)
				if (!resPhone) {
					vm.$message.warning('请输入正确的手机号码');
					return;
				}
				if(vm.RegisterForm.phoneNumberCode.trim() == '' || vm.RegisterForm.phoneNumberCode.trim().length !==6){
					vm.$message.warning("验证码不能为空且必须为6位数字");
					return
				}
				if(vm.RegisterForm.password.trim() !== vm.RegisterForm.confirmPassword.trim()){
					vm.$message.warning("两次密码必须一致");
					return
				}
				if(vm.RegisterForm.password.trim() == '' || vm.RegisterForm.password.trim().length <=6){
					vm.$message.warning("密码不能为空且必须为大于6位");
					return
				}
				let LoginForm = {
					nickName: vm.RegisterForm.nickName,
					phoneNumber: vm.RegisterForm.phoneNumber,
					code: vm.RegisterForm.phoneNumberCode,
					password: vm.RegisterForm.password
				}
				axios({
					method: 'post',
					dataType: 'json',
					contentType: 'application/json;charset=UTF-8',
					url: vm.$dev.BASE_URL + '/user-info-service/userInfo/register',
					data: LoginForm,
				}).then(function(res) {
					if (!res.data.success) {
						vm.$message.error(res.data.message);
					} else {
						vm.$message.success(res.data.message);
						// 把用户信息放到 cookie 中去
						console.log(res.data.data)
						// 跳转到首页
						vm.$router.push('/Login')
					}
				});
			},
			// 发送验证码
			sendCode() {
				let vm = this
				// 验证手机号
				let patternPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
				// 验证手机号的结果
				let resPhone = patternPhone.test(vm.RegisterForm.phoneNumber)
				if (!resPhone) {
					vm.$message.warning('请输入正确的手机号码');
					return;
				}
				vm.fullscreenLoading = true
				axios({
					method: 'get',
					url: vm.$dev.BASE_URL + '/message-service/message/getSmsCode/' + vm.RegisterForm.phoneNumber,
				}).then(function(res) {
					if (!res.data.success) {
						vm.$message.error(res.data.message);
						vm.fullscreenLoading = false;
					} else {
						vm.$message.success(res.data.message);
						vm.fullscreenLoading = false;
						vm.edit = true
					}
				});
			}
		}
	}
</script>

<style scoped="scoped">
	.register {
		text-align: center;
		width: 20%;
		margin-left: 40%;
		margin-top: 10%;
	}

	.login-tabs {
		text-align: left;
	}

	.login-submit {
		text-align: right;
	}
</style>
